<template>
  <div class="shops-detail">
    <!-- <div class="path">
      <span>资产管理</span> / {{ $route.query.ownershipName }}/
      {{ propertyinfoStorage && propertyinfoStorage.propertyName }}
    </div> -->
    <div class="shops-detail-content">
      <div class="content-name" @click="backClick">
        <i class="el-icon-arrow-left"></i>
        <div class="name">
          <span class="line"></span>
          {{ propertyinfoStorage && propertyinfoStorage.propertyName }}
        </div>
      </div>
      <div class="content-info-top">
        <div style="display: flex; align-items: center">
          <div class="title">
            <img src="../../assets/images/asset-img1.png" />
            <p
              v-if="
                $route.query.propertyUnitCode == 'property_type_zhengwuyongfang'
              "
            >
              政务用房基本信息
            </p>
            <p
              v-if="
                $route.query.propertyUnitCode == 'property_type_wenhuajiaoyu'
              "
            >
              文化教育基本信息
            </p>
            <p
              v-if="
                $route.query.propertyUnitCode == 'property_type_yiliaoweisheng'
              "
            >
              医疗卫生基本信息
            </p>
            <p
              v-if="
                $route.query.propertyUnitCode == 'property_type_yanglaoyongfang'
              "
            >
              养老用房基本信息
            </p>
            <p
              v-if="
                $route.query.propertyUnitCode == 'property_type_shequyongfang'
              "
            >
              社区用房基本信息
            </p>
            <p
              v-if="
                $route.query.propertyUnitCode ==
                'property_type_shuilijichusheshi'
              "
            >
              水利基础设施基本信息
            </p>
            <p
              v-if="
                $route.query.propertyUnitCode == 'property_type_huanweisheshi'
              "
            >
              环卫设施基本信息
            </p>
            <p
              v-if="
                $route.query.propertyUnitCode == 'property_type_tingchechang'
              "
            >
              停车场基本信息
            </p>
            <p v-if="$route.query.propertyUnitCode == 'property_type_chewei'">
              车位基本信息
            </p>
            <p
              v-if="
                $route.query.propertyUnitCode ==
                'property_type_chaiqianwccfangchan'
              "
            >
              拆迁（未拆除）房产基本信息
            </p>
          </div>
          <div class="opt" @click="editGycfClick" v-if="permissions.includes('assets:unit:edit:disabled')">
            <i class="el-icon-edit"></i><span>编辑</span>
          </div>
        </div>

        <div class="info-top-content">
          <div class="top-content-left">
            <div class="top-content-left-item">
              编号：<span>{{ form.propertyUnitCode }} </span>
            </div>
            <div class="top-content-left-item">
              栋号：<span>{{ form.dongCode }} </span>
            </div>
            <div class="top-content-left-item">
              资产类型：
              <span
                v-if="
                  $route.query.propertyUnitCode ==
                  'property_type_zhengwuyongfang'
                "
                >政务用房
              </span>
              <span
                v-else-if="
                  $route.query.propertyUnitCode ==
                  'property_type_wenhuajiaoyu'
                "
                >文化教育
              </span>
              <span
                v-else-if="
                  $route.query.propertyUnitCode ==
                  'property_type_yiliaoweisheng'
                "
                >医疗卫生
              </span>
              <span
                v-else-if="
                  $route.query.propertyUnitCode ==
                  'property_type_yanglaoyongfang'
                "
                >养老用房
              </span>
              <span
                v-else-if="
                  $route.query.propertyUnitCode ==
                  'property_type_shequyongfang'
                "
                >社区用房
              </span>
              <span
                v-else-if="
                  $route.query.propertyUnitCode ==
                  'property_type_shuilijichusheshi'
                "
                >水利基础设施
              </span>
              <span
                v-else-if="
                  $route.query.propertyUnitCode ==
                  'property_type_huanweisheshi'
                "
                >环卫设施
              </span>
              <span
                v-else-if="
                  $route.query.propertyUnitCode ==
                  'property_type_tingchechang'
                "
                >停车场
              </span>
              <span
                v-else-if="
                  $route.query.propertyUnitCode ==
                  'property_type_chewei'
                "
                >车位
              </span>
              <span
                v-else-if="
                  $route.query.propertyUnitCode ==
                  'property_type_chaiqianwccfangchan'
                "
                >拆迁（未拆除）房产
              </span>
            </div>
            <div class="top-content-left-item">
              管理单位 ：<span
                >{{ propertyinfoStorage && propertyinfoStorage.manageDeptName }}
              </span>
            </div>
            <div class="top-content-left-item">
              总建筑面积：<span>{{ form.buildingAreaTotal }}㎡ </span>
            </div>
            <div class="top-content-left-item">
              <span
                v-if="
                  $route.query.propertyUnitCode ==
                  'property_type_zhengwuyongfang'
                "
              >
                政务用房信息:</span
              >
              <span
                v-if="
                  $route.query.propertyUnitCode == 'property_type_wenhuajiaoyu'
                "
              >
                文化教育信息:</span
              >
              <span
                v-if="
                  $route.query.propertyUnitCode ==
                  'property_type_yiliaoweisheng'
                "
              >
                医疗卫生信息:</span
              >
              <span
                v-if="
                  $route.query.propertyUnitCode ==
                  'property_type_yanglaoyongfang'
                "
              >
                养老用房信息:</span
              >
              <span
                v-if="
                  $route.query.propertyUnitCode == 'property_type_shequyongfang'
                "
              >
                社区用房信息:</span
              >
              <span
                v-if="
                  $route.query.propertyUnitCode ==
                  'property_type_shuilijichusheshi'
                "
              >
                水利基础设施信息:</span
              >
              <span
                v-if="
                  $route.query.propertyUnitCode == 'property_type_huanweisheshi'
                "
              >
                环卫设施信息:</span
              >
              <span
                v-if="
                  $route.query.propertyUnitCode == 'property_type_tingchechang'
                "
              >
                停车场信息:</span
              >
              <span
                v-if="$route.query.propertyUnitCode == 'property_type_chewei'"
              >
                车位信息:</span
              >
              <span
                v-if="
                  $route.query.propertyUnitCode ==
                  'property_type_chaiqianwccfangchan'
                "
              >
                拆迁（未拆除）房产信息:</span
              >
              <span>{{ form.punitInfo }} </span>
            </div>
          </div>
          <div class="top-content-right">
            <div class="top-content-right-title">权证情况</div>
            <div
              class="top-content-right-item"
              v-if="form.landCertificateWarrantFlag === 1"
            >
              <span>土地证</span>
              <span>{{ form.landCertificateCode }}</span>
              <span
                class="download"
                v-for="(item, index) in form.landCertificateAttachList"
                :key="index"
                @click="downloadClick(item.attUrl)"
                >{{ item.originalAttName }}</span
              >
            </div>
            <div
              class="top-content-right-item"
              v-if="form.houseOwnershipWarrantFlag === 1"
            >
              <span>房产证</span>
              <span>{{ form.houseOwnershipCertificateCode }}</span>
              <span
                class="download"
                v-for="(
                  item, index
                ) in form.houseOwnershipCertificateAttachList"
                :key="index"
                @click="downloadClick(item.attUrl)"
                >{{ item.originalAttName }}</span
              >
            </div>
            <div
              class="top-content-right-item"
              v-if="form.immovablePropertyWarrantFlag === 1"
            >
              <span>不动产权证</span>
              <span>{{ form.immovablePropertyCertificateCode }}</span>
              <span
                class="download"
                v-for="(
                  item, index
                ) in form.immovablePropertyCertificateAttachList"
                :key="index"
                @click="downloadClick(item.attUrl)"
                >{{ item.originalAttName }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <feijy-shops-drawer
      :drawer.sync="gycfDrawer"
      :propertyObj="propertyObj"
      :propertyTypeCode="$route.query.propertyUnitCode"
      @childFeijyUnitEvent="getNobusinessDetail"
    ></feijy-shops-drawer>
  </div>
</template>

<script>
import feijyShopsDrawer from "./feijy-shops-drawer.vue";
import { getToken } from "@/utils/auth";

import { nobusinessDetail } from "@/api/shops";

export default {
  components: {
    feijyShopsDrawer,
  },
  data() {
    return {
      form: {},
      propertyinfoStorage: null,
      leaseDrawer: false,
      gycfDrawer: false,
      historyDrawer: false,
      leaseEvaluationList: [], // 租赁评估List
      leaseInfo: null,
      leaseRentList: [],
      propertyObj: null,
      fileDialogVisible: false,
      headersAuthorization: null,
      depositList: [],
      depositForm: {
        archivingStatus: 0,
        depositRefundAmount: "",
        depositRefundDate: "",
        depositRefundAttachIds: "",
        depositRefundInstruction: "",
      },
    };
  },
  mounted() {
    this.init();
    this.propertyinfoStorage = JSON.parse(localStorage.getItem("propertyinfo"));
    if (this.$route.query.propertyUnitId) {
      this.getNobusinessDetail();
    }
  },
  computed: {
    permissions() {
      return this.$store.getters.permissions
    }
  },
  methods: {
    init() {
      // 获取用于上传的token
      this.headersAuthorization = {
        Authorization: "Bearer " + getToken(),
      };
    },
    /**下载文件（权证） */
    downloadClick(url) {
      const a = document.createElement("a"); // 创建一个HTML 元素
      a.setAttribute("download", ""); //download属性
      a.setAttribute("href", url); // href链接
      a.setAttribute("target", "_blank");
      a.click(); // 自执行点击事件
    },
    backClick() {
      history.go(-1);
    },
    addLeaseClick() {
      this.leaseDrawer = true;
    },
    editGycfClick() {
      this.gycfDrawer = true;
      this.propertyObj = Object.assign({}, this.form);
    },
    getNobusinessDetail() {
      // 查看详情
      nobusinessDetail(this.$route.query.propertyUnitId).then((res) => {
        this.form = Object.assign({}, res.data);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.shops-detail {
  .path {
    height: 40px;
    line-height: 40px;
    width: 100%;
    background: rgba($color: #fff, $alpha: 0.2);
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 0px 0px;
    padding-left: 12px;
    span {
      font-weight: 600;
    }
  }
  .shops-detail-content {
    width: 98.5%;
    height: calc(100vh - 90px);
    margin: 15px auto 0;
    background: #ffffff;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px 6px 6px 6px;
    overflow-y: auto;
    .content-name {
      width: 98%;
      height: 60px;
      line-height: 60px;
      margin: 10px auto 17px;
      display: flex;
      align-items: center;
      .el-icon-arrow-left {
        width: 86px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-right: 1px solid #e7e7e7;
        font-size: 36px;
        cursor: pointer;
      }
      .name {
        font-size: 28px;
        height: 30px;
        line-height: 30px;
        border-left: 4px solid #0052d9;
        margin-left: 16px;
        padding-left: 16px;
        position: relative;
        .line {
          border-left: 4px solid #ffc522;
          height: 12px;
          position: absolute;
          left: -4px;
          top: 0;
        }
      }
    }
    .content-info-top {
      width: 95%;
      margin: 0 auto 15px;
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      border-radius: 6px 6px 6px 6px;
      .info-top-content {
        display: flex;

        .top-content-left {
          display: flex;
          flex-flow: wrap;
          margin-left: 50px;
          margin-top: 15px;
          width: 60%;
          padding-bottom: 25px;
          .top-content-left-item {
            width: 33%;
            padding-bottom: 25px;
          }
        }
        .top-content-right {
          flex: 1;
          .top-content-right-title {
            margin-bottom: 10px;
          }
          .top-content-right-item {
            width: 80%;
            background: linear-gradient(90deg, #fbf2d1 0%, #fff7db 100%);
            border-radius: 8px 8px 8px 8px;
            padding: 6px 25px;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            span {
              display: flex;
              padding-left: 18px;
              width: 30%;
              &:nth-child(2) {
                width: 150px;
              }
              &:nth-child(3) {
                color: #0052d9;
                text-decoration: underline;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .content-info-bottom {
      width: 95%;
      margin: 0 auto 15px;
      .content-info-bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .content-info-bottom-left {
        display: flex;
        align-items: center;
        .left-button {
          @include searchBtn;
          font-size: 14px;
          border-radius: 4px;
          width: 120px;
          margin-left: 40px;
        }
      }
      .content-info-bottom-right {
        display: flex;
        justify-content: flex-end;
        .left-button {
          @include searchBtn;
          font-size: 14px;
          border-radius: 4px;
          width: 100px;
        }
      }
    }

    .title {
      display: flex;
      align-items: center;
      padding-left: 24px;
      color: #000;
      font-size: 18px;
      img {
        height: 30px;
        width: 30px;
      }
    }
  }
  .opt {
    padding-left: 26px;
    color: #0052d9;
    cursor: pointer;
    span {
      font-size: 12px;
      padding-left: 3px;
    }
  }
  .info-bottom-content {
    height: auto;
    background: #fafafa;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #dcdcdc;
    display: flex;
    position: relative;
    .info-bottom-content-opt {
      display: flex;
      position: absolute;
      right: 16px;
      top: 16px;
    }
    .info-title {
      border-left: 4px solid #0052d9;
      margin-top: 20px;
      margin-left: 29px;
      padding-left: 5px;
    }
    .info-bottom-content-left {
      width: 50%;
      border-right: 1px solid #e7e7e7;
    }
    .info-bottom-content-right {
      width: 50%;
    }
    .info {
      display: flex;
      padding-bottom: 25px;
      .info-left {
        margin-left: 29px;
        margin-top: 32px;
        margin-right: 15px;
        .info-left-item {
          padding-bottom: 24px;
        }
      }
      .info-right {
        flex: 1;
        .info-right-all {
          display: flex;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.shops-detail {
  .el-table td {
    padding: 5px 0;
  }
  .el-drawer.btt {
    overflow-y: auto;
  }
}
</style>